<template>
  <div>
    <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
      <!-- 内层弹出框 -->
      <el-dialog
        width="60%"
        title="内层 Dialog"
        :visible.sync="innerVisible"
        append-to-body>

         <!-- 内层区域  -->
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
          <el-form-item label="标题">
            <el-input v-model="formLabelAlign.title"></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
              <div class="block">
                <el-date-picker
                  v-model="formLabelAlign.time"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </div>
          </el-form-item>
          <el-form-item label="博客内容">
            <el-input type="textarea" v-model="formLabelAlign.content"></el-input>
          </el-form-item>
        </el-form>

        <el-footer>
          <el-button @click="handleInnerCloseBtn">取 消</el-button>
          <el-button type="primary" @click="handleInnerSureBtn">内层确定按钮</el-button>
        </el-footer>
      </el-dialog>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleOuterCloseDialog">取 消</el-button>
        <el-button type="primary" @click="handleOuterSureDialog">打开内层 Dialog</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    outerVisible: {
      type: Boolean,
      default: false
    },
    innerVisible: {
      type: Boolean
    },
    labelPosition: {
      type: String,
      default: 'right'
    },
    formLabelAlign: {
      type: Object
    },
    value: {
      type: String
    }
  },
  methods: {
    // 内层弹出框取消事件
    handleInnerCloseBtn() {
      this.$emit('handleInnerCloseBtn')
    },
    // 内层弹出框确定事件
    handleInnerSureBtn() {
      //  console.log(this.formLabelAlign, 'formLabelAlign')
      this.$emit('handleInnerSureBtn')
    },
    // 处理外层弹出框关闭事件
    handleOuterCloseDialog() {
      this.$emit('handleOuterCloseDialog')
    },
    // 处理打开内层弹出框事件
    handleOuterSureDialog() {
      this.$emit('handleOuterSureDialog')
    }
  },
}
</script>